<template>
  <div class="development-step">
    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="task" tab="开发任务">
        <a-table :columns="taskColumns" :data-source="tasks" :pagination="false" row-key="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-button type="link" size="small" @click="editTask(record)">编辑</a-button>
              <a-button type="link" size="small" @click="deleteTask(record)">删除</a-button>
            </template>
          </template>
        </a-table>

        <div class="task-actions">
          <a-button type="primary" @click="showTaskModal">添加任务</a-button>
          <a-button style="margin-left: 10px" @click="importTasks">导入任务</a-button>
        </div>
      </a-tab-pane>

      <a-tab-pane key="code" tab="代码提交">
        <a-table :columns="commitColumns" :data-source="codeCommits" :pagination="{ pageSize: 5 }" row-key="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'message'">
              <a @click="showCommitDetail(record)">{{ record.message }}</a>
            </template>
          </template>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="issue" tab="问题跟踪">
        <div class="issue-stats">
          <a-statistic title="总问题数" :value="issueStats.total" />
          <a-statistic title="已解决" :value="issueStats.resolved" />
          <a-statistic title="进行中" :value="issueStats.inProgress" />
          <a-statistic title="待处理" :value="issueStats.pending" />
        </div>

        <a-divider />

        <a-table :columns="issueColumns" :data-source="issues" :pagination="{ pageSize: 5 }" row-key="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'priority'">
              <a-tag :color="getPriorityColor(record.priority)">
                {{ record.priority }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'status'">
              <a-tag :color="getIssueStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>

    <!-- 任务编辑模态框 -->
    <a-modal
      v-model:open="taskModal.visible"
      :title="taskModal.title"
      @ok="handleTaskSubmit"
      @cancel="taskModal.visible = false"
    >
      <a-form :model="taskModal.form" :label-col="{ span: 6 }">
        <a-form-item label="任务名称" required>
          <a-input v-model:value="taskModal.form.name" />
        </a-form-item>
        <a-form-item label="任务描述">
          <a-textarea v-model:value="taskModal.form.description" />
        </a-form-item>
        <a-form-item label="负责人">
          <a-select v-model:value="taskModal.form.assignee">
            <a-select-option v-for="user in developers" :key="user.id" :value="user.id">
              {{ user.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="预计工时">
          <a-input-number v-model:value="taskModal.form.estimate" :min="1" :max="100" />
        </a-form-item>
        <a-form-item label="优先级">
          <a-select v-model:value="taskModal.form.priority">
            <a-select-option value="high">高</a-select-option>
            <a-select-option value="medium">中</a-select-option>
            <a-select-option value="low">低</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 代码提交详情模态框 -->
    <a-modal v-model:open="commitModal.visible" title="代码提交详情" width="80%" :footer="null">
      <div v-if="commitModal.data">
        <h3>{{ commitModal.data.message }}</h3>
        <p>提交人: {{ commitModal.data.author }} | 时间: {{ formatTime(commitModal.data.time) }}</p>
        <a-divider />
        <pre class="code-diff">{{ commitModal.data.diff }}</pre>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const props = defineProps({
  stepData: Object,
});

const emit = defineEmits(["update"]);

const activeTab = ref("task");

// 开发任务相关
const taskColumns = [
  { title: "任务名称", dataIndex: "name", key: "name" },
  { title: "负责人", dataIndex: "assignee", key: "assignee" },
  { title: "预计工时", dataIndex: "estimate", key: "estimate" },
  { title: "状态", dataIndex: "status", key: "status" },
  { title: "操作", key: "action" },
];

const tasks = ref([
  { id: 1, name: "用户登录功能", assignee: "张三", estimate: 8, status: "进行中" },
  { id: 2, name: "订单列表页面", assignee: "李四", estimate: 12, status: "未开始" },
  { id: 3, name: "支付接口开发", assignee: "王五", estimate: 16, status: "已完成" },
]);

const developers = ref([
  { id: "dev1", name: "张三" },
  { id: "dev2", name: "李四" },
  { id: "dev3", name: "王五" },
]);

const taskModal = reactive({
  visible: false,
  title: "添加任务",
  form: {
    id: null,
    name: "",
    description: "",
    assignee: null,
    estimate: 8,
    priority: "medium",
  },
});

// 代码提交相关
const commitColumns = [
  { title: "提交信息", dataIndex: "message", key: "message" },
  { title: "提交人", dataIndex: "author", key: "author" },
  { title: "时间", dataIndex: "time", key: "time" },
];

const codeCommits = ref([
  {
    id: 1,
    message: "实现用户登录功能",
    author: "张三",
    time: new Date("2023-05-12 14:30:00"),
    diff: "+ add login page\n+ add auth service\n+ add login api",
  },
  {
    id: 2,
    message: "修复登录页面样式问题",
    author: "李四",
    time: new Date("2023-05-13 09:15:00"),
    diff: "- remove old styles\n+ add new styles\n* fix layout issues",
  },
]);

const commitModal = reactive({
  visible: false,
  data: null,
});

// 问题跟踪相关
const issueColumns = [
  { title: "问题描述", dataIndex: "description", key: "description" },
  { title: "优先级", dataIndex: "priority", key: "priority" },
  { title: "状态", dataIndex: "status", key: "status" },
  { title: "报告人", dataIndex: "reporter", key: "reporter" },
];

const issues = ref([
  { id: 1, description: "登录页面在移动端显示异常", priority: "high", status: "已解决", reporter: "测试员A" },
  { id: 2, description: "支付接口偶尔超时", priority: "medium", status: "进行中", reporter: "测试员B" },
  { id: 3, description: "订单列表分页有问题", priority: "low", status: "待处理", reporter: "客户" },
]);

const issueStats = reactive({
  total: 15,
  resolved: 8,
  inProgress: 4,
  pending: 3,
});

const formatTime = (date) => {
  // return format(date, "yyyy-MM-dd HH:mm");
};

const getStatusColor = (status) => {
  switch (status) {
    case "已完成":
      return "green";
    case "进行中":
      return "blue";
    default:
      return "gray";
  }
};

const getPriorityColor = (priority) => {
  switch (priority) {
    case "high":
      return "red";
    case "medium":
      return "orange";
    default:
      return "green";
  }
};

const getIssueStatusColor = (status) => {
  switch (status) {
    case "已解决":
      return "green";
    case "进行中":
      return "blue";
    default:
      return "gray";
  }
};

const showTaskModal = (task = null) => {
  if (task) {
    taskModal.title = "编辑任务";
    taskModal.form = { ...task };
  } else {
    taskModal.title = "添加任务";
    taskModal.form = {
      id: null,
      name: "",
      description: "",
      assignee: null,
      estimate: 8,
      priority: "medium",
    };
  }
  taskModal.visible = true;
};

const handleTaskSubmit = () => {
  if (taskModal.form.id) {
    // 更新任务
    const index = tasks.value.findIndex((t) => t.id === taskModal.form.id);
    if (index !== -1) {
      tasks.value[index] = { ...taskModal.form };
    }
  } else {
    // 添加新任务
    taskModal.form.id = Date.now();
    tasks.value.push({ ...taskModal.form });
  }
  taskModal.visible = false;
  emit("update", { tasks: tasks.value });
};

const deleteTask = (task) => {
  tasks.value = tasks.value.filter((t) => t.id !== task.id);
  emit("update", { tasks: tasks.value });
};

const importTasks = () => {
  // 实际项目中这里可以实现从JIRA等系统导入任务
  console.log("导入任务");
};

const showCommitDetail = (commit) => {
  commitModal.data = commit;
  commitModal.visible = true;
};
</script>

<style scoped>
.development-step {
  padding: 10px;
}

.task-actions {
  margin-top: 15px;
}

.issue-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.code-diff {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  max-height: 400px;
  overflow: auto;
}
</style>
